import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { useCallback, useState } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { MenusLists } from './menus';

// 左侧菜单
export const LayoutLeftMenu: React.FC = () => {
	const navigate = useNavigate();
	const location = useLocation();
	const [collapsed, setCollapsed] = useState(false);

	const outlineClass = 'text-14 font-bold text-#333';

	const handleMenuClick = useCallback(
		({ key }: { key: string }) => {
			// 路由跳转
			navigate(key);
		},
		[navigate]
	);

	return (
		<>
			<div
				className={`${
					collapsed ? 'w-70' : 'w-210'
				} flex flex-col justify-between h-full pt-15 box-border shadow-[2px_0_6px_rgba(0,0,0,0.15)] transition-all`}>
				<Menu
					onClick={handleMenuClick}
					className="w-full inline-menu-layout"
					mode="inline"
					items={MenusLists}
					inlineCollapsed={collapsed}
					selectedKeys={[location.pathname]}
				/>
				{/* 菜单折叠按钮 */}
				<div
					onClick={() => setCollapsed(!collapsed)}
					className={`h-40 bt-1-#e6e6e6 flex items-center ${
						collapsed ? 'justify-center' : 'justify-between px-20'
					} cursor-pointer`}>
					<span
						className={`text-13 text-#666 whitespace-nowrap overflow-hidden transition-all duration-300 ${
							collapsed ? 'w-0 opacity-0' : 'w-[100px] opacity-100'
						}`}>
						隐藏左侧菜单
					</span>
					{collapsed ? (
						<MenuUnfoldOutlined className={outlineClass} />
					) : (
						<MenuFoldOutlined className={outlineClass} />
					)}
				</div>
			</div>
			<div className="w-0 flex-1 bg-[rgba(235,240,244,.7)] px-20 p-t-20 p-b-10 box-border">
				<Outlet />
				<div id="sub-app-container"></div>
			</div>
		</>
	);
};
